.container { width: auto; padding: 0 .75px; }

.disable {  opacity: .5;  }

.cup    { cursor: pointer; }

.rotate { transform: rotate(180deg); }

.auto { display: block; margin: 0 auto }

/********************* Margin || Padding *********************/
@for $i from 0 through 50 {
   $em: $i * 2 + rpx;
   .m#{$i}  { margin: #{$em} }
   .p#{$i}  { padding: #{$em} }
   .mx#{$i} { margin-left: #{$em}; margin-right: #{$em}; }
   .my#{$i} { margin-top: #{$em};  margin-bottom: #{$em}; }
   .px#{$i} { padding-left: #{$em}; padding-right: #{$em}; }
   .py#{$i} { padding-top: #{$em};  padding-bottom: #{$em}; }
   .mt#{$i} { margin-top: #{$em} !important; }
   .mr#{$i} { margin-right: #{$em} !important; }
   .mb#{$i} { margin-bottom: #{$em} !important; }
   .ml#{$i} { margin-left: #{$em} !important; }
   .pt#{$i} { padding-top: #{$em} !important; }
   .pr#{$i} { padding-right: #{$em} !important; }
   .pb#{$i} { padding-bottom: #{$em} !important; }
   .pl#{$i} { padding-left: #{$em} !important; }

   .top-#{$i}    { top: #{$em} }
   .right-#{$i}  { right: #{$em} }
   .bottom-#{$i} { bottom: #{$em} }
   .left-#{$i}   { left: #{$em} }
}

/********************* Flex *********************/
.flex { display: flex; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.flex-column { flex-direction: column; }
.flex-bs { display: flex; justify-content: space-between; align-items: flex-start; }
.flex-bc { display: flex; justify-content: space-between; align-items: center; }
.flex-be { display: flex; justify-content: space-between; align-items: flex-end; }
.flex-ac { display: flex; justify-content: space-around; align-items: center; }
.flex-sc { display: flex; justify-content: flex-start; align-items: center; }
.flex-ss { display: flex; justify-content: flex-start; align-items: flex-start; }
.flex-se { display: flex; justify-content: flex-start; align-items: flex-end; }
.flex-cs { display: flex; justify-content: center; align-items: flex-start;; }
.flex-cc { display: flex; justify-content: center; align-items: center; }
.flex-ce { display: flex; justify-content: center; align-items: flex-end; }

/********************* Text *********************/
.tr { text-align: right; }
.tl { text-align: left; }
.tc { text-align: center; }
.nowrap { white-space: nowrap; }

/********************* Block *********************/
.hide   { display: none; }
.inline { display: inline-block; }
.circle { border-radius: 50%; }
.radius-8 { border-radius: 16px }

.bold { font-weight: bold; }
.font-italic { font-style: italic; }

.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }

/********************* Position *********************/
.posr        { position: relative; }
.posa        { position: absolute !important; }
.posf        { position: fixed; }
.pos-center  { left:50%; top:50%; transform: translate(-50%,-50%); }
.pos-xcenter { left:50%; transform: translate(-50%,0); }
.pos-ycenter { top:50%; transform: translate(0,-50%); }

.top-0       { top: 0; }
.left-0      { left: 0; }
.right-0     { right: 0; }
.bottom-0    { bottom: 0 !important; }

/********************* Width and Height *********************/
@for $i from 0 through 100 {
    .w#{$i} {  width: $i * 1%; }
    .h#{$i} { height: $i * 1%; }
}

.full        { width: 100%; height: 100%; }
.full-w      { width: 100% !important; }
.full-h      { height: 100% !important; }

/********************* Color *********************/
.text-white { color: #fff; }
.text-green { color: green; }
.text-red   { color: #ed6d71; }
.text-blue   { color: #0481F4; }
.text-orange   { color: orange; }
.text-yellow   { color: yellow; }
.text-gray  { color: #9B9EAD; }

.bg-white { background-color:#fff; }
.bg-f5 { background-color: #f5f5f5; }

/********************* Font-Size *********************/
@for $i from 10 through 60 {
	.f#{$i} { font-size: $i + rpx; }
}

/********************* Border *********************/
.border-0 { border: none !important; }
.border-4 { border: 4px solid; }
.border-radius-0 { border-radius: 0 !important; }

.border{ border: 1px solid #f5f5f5; }
.border-b{ border-bottom: 1px solid #f5f5f5; }
.border-t{ border-top: 1px solid #f5f5f5; }
.border-l{ border-left: 1px solid #f5f5f5; }
.border-r{ border-right: 1px solid #f5f5f5; }
.border-b10{ border-bottom: 10px solid #f5f5f5; }
.border-t10{ border-top: 10px solid #f5f5f5; }

.border-tran{ border: 1px solid transparent; }


/********************* Image *********************/
.img-bg { display: block; background-color: #ccc; }
.image-thumb { display: block; width: 48px; height: 48px; }
.avatar { display: block; width: 60px; height: 60px; border-radius: 50%; }